<template>
    <div class="view">
        <nav-bar @clickLeft="back" :fixed="false">
            <div class="back" slot="left">
                <i class="iconfont icon-fanhui"></i>
            </div>
            <div class="search-input-wrap" :class="{'search-input-wrap-blur' : !searchFocus}">
                <input class="search-input-wrap-input" ref="searchInput" @focus="searchFocus=true" @blur="searchFocus=false" v-model="tempSearchWord" type="text" placeholder="请输入关键词搜索商品"></input>
            </div>
            <template>
                <div class="right-btn" slot="right" v-if="tempSearchWord !==''" @click="search">
                    搜索
                </div>
                <div class="right-btn right-cancel" slot="right" v-else>
                    取消
                </div>
            </template>
        </nav-bar>
        <div class="search-mask" v-if="searchFocus"></div>
        <template v-if="!searchFocus">
            <div class="nav-tab">
                <div class="nav-item" :class="{'nav-item-current': filterIndex === 0}" @click="navTabClick(0)">
                    综合排序
                </div>
                <div class="nav-item" :class="{'nav-item-current': filterIndex === 1}" @click="navTabClick(1)">
                    销量优先
                </div>
                <div class="nav-item" :class="{'nav-item-current': filterIndex === 2}" @click="navTabClick(2)">
                    <span>价格</span>
                    <div class="nav-item-box">
                    <span :class="{'nav-item-box-current': priceOrder === 1 && filterIndex === 2}"
                          class="iconfont icon-shang"></span>
                        <span :class="{'nav-item-box-current': priceOrder === 2 && filterIndex === 2}"
                              class="iconfont icon-xia"></span>
                    </div>
                </div>
                <!--            <text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text>-->
            </div>
            <div class="none-product" v-if="!productList.length">
                <svg class="svg-icon" aria-hidden="true">
                    <use xlink:href="#icon-kong"></use>
                </svg>
                <div>暂无匹配商品!</div>
            </div>
            <div class="product-scroll" v-else>
                <cube-scroll ref="scroll">
                    <div class="product-list">
                        <waterfall :data="productList" ref="waterfall">
                            <div class="product-item" v-for="product in productList" @click="toProductDetail(product.item_id)">
                                <div class="product-item-img">
                                    <img :src="product.image[0].file_path">
                                </div>
                                <div class="product-item-title ellipsis-2">
                                    {{product.name}}
                                </div>
                                <div class="product-item-price">
                                    <div class="product-item-price-box">
                                        <span class="now-price">{{product.item_price}}</span>
                                        <span class="line-price">{{product.line_price}}</span>
                                    </div>
                                    <span class="product-item-sale">已售 {{product.sales_num}}</span>
                                </div>
                            </div>
                        </waterfall>
                    </div>
                </cube-scroll>

            </div>
        </template>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import NavBar from "@/components/aui/NavBar.vue";
    import CommonUnit from "@/unit/CommonUnit";
    import Waterfall from "vue-waterfall2/waterfall.vue";


    @Component({
        components: {
            NavBar, Waterfall
        }
    })
    export default class ProductList extends Scene {
        private cateMaskState: number = 0; //分类面板展开状态
        private loadingType: string = "more"; //加载更多状态
        private filterIndex: number = 0;
        private cateId: number = 0; //已选三级分类id
        private priceOrder: number = 0; //1 价格从低到高 2价格从高到低
        private cateList: any[] = [];
        private productList: any[] = [];
        private page: number = 1;
        private sortType: string = "all";
        private tempSearchWord: string = "";
        private categoryId: string = "";
        private searchFocus: boolean = false;

        private back() {
            this.navigateBack();
        }

        private search() {
            this.categoryId = "";
            this.getProductList();
        }

        @Watch("$route")
        private onChangeRoute() {
            this.updateQuery();
        }

        private mounted() {
            this.page = 1;
            const query = this.$route.query;
            this.categoryId = String(query.categoryId || "");
            this.tempSearchWord = String(query.searchWord || "");
            if (String(query.focus) === "1") {
                (<any> this).$refs.searchInput.focus();
            }
            this.getProductList();
        }

        private updateQuery() {
            this.page = 1;
            const query = this.$route.query;
            this.categoryId = String(query.categoryId || "");
            this.tempSearchWord = String(query.searchWord || "");
            this.getProductList();
        }


        private async getProductList(): Promise<any> {
            const productListRes = await Http.get(this.api.productList, {
                page: this.page,
                sortType: this.sortType,
                category_id: this.categoryId,
                search: String(this.tempSearchWord)
            },{});
            this.productList = productListRes.data.data;
        }

        private navTabClick(n: number): void {
            if (this.filterIndex === n && n !== 2) {
                return;
            }
            if(n === 0){
                this.sortType='all';
            }else if(n === 1){
                this.sortType='sales';
            }
            else if(n === 2){
                this.sortType='price';
            }
            this.filterIndex = n;
            if (n === 2) {
                this.priceOrder = (this.priceOrder === 1 ? 2 : 1);
            } else {
                this.priceOrder = 0;
            }
            (<any> this).$refs.scroll.scrollTo(0, 0, .3);
            this.getProductList();
        }

        private toProductDetail(id: string) {
            this.navigateTo({
                name: "productDetail",
                query: {
                    id: id
                }
            });
        }
    }
</script>

<style scoped lang="stylus">
    .view
        background $theme-page-common-background-color;
        height 100vh;
        width 100vw;
        overflow hidden;

        .nav-tab
            display flex;
            width: 100vw;
            height 40px;
            background #fff;

            .nav-item
                flex 1;
                display flex;
                justify-content center;
                align-items center;
                height 100%;
                font-size 14px;
                color #333;
                position relative;

                &.nav-item-current
                    color $theme-common-color;

                .nav-item-box
                    display flex;
                    flex-direction column;

                    .iconfont
                        display flex;
                        align-items center;
                        justify-content center;
                        width 15px;
                        height 7px;
                        line-height 1;
                        margin-left 2px;
                        font-size 11px;
                        color #888;
                        padding 1px 0;

                        &.nav-item-box-current
                            color $theme-common-color;

        .search-mask
            height calc(100vh - var(--safe-area-inset-top) - 44px);
            width 100vw;
            background $theme-white-to-gay-background-gradient

        .product-scroll
            height calc(100vh - var(--safe-area-inset-top) - 44px - 40px);
            width 100vw;
            background $theme-white-to-gay-background-gradient

            .product-list
                display flex;
                flex-wrap wrap;
                padding-left 15px;

        .none-product
            height calc(100vh - var(--safe-area-inset-top) - 44px - 40px);
            width 100vw;
            background $theme-white-to-gay-background-gradient;
            color $theme-viceColor-font;
            text-align center;
            svg
                font-size 80px;
                margin-top 80px;
                margin-bottom 20px;

    .search-input-wrap
        height 29px;
        text-align center;
        font-size 13px;
        color #333;
        border-radius 2px;
        background rgba(210, 210, 210, .4);
        width 230px;
        margin-top 6px;
        overflow hidden
        line-height 29px !important
        margin-right 50px;
        padding 0 12px;


        .search-input-wrap-input
            width 100%;
            height 29px;
            background rgba(255, 255, 255, 0)
            margin-top 0;
            font-size 12px;
            color #333;

            &::-webkit-input-placeholder {
                color: #999;
            }

    .search-input-wrap-blur
        width 230px !important
        margin-right 50px !important
        line-height 29px


    .right-btn
        background $theme-common-color;
        color #fff;
        height 29px;
        width 60px;
        display flex;
        justify-content center;
        align-items center;
        margin-top 6px;
        border-radius 2px;
        position absolute
        z-index 50
        right 12px

        &.right-cancel
            background $theme-auxiliary-color


</style>
